<!--
 * @Description: 图片
 * @Author: huacong
 * @Date: 2020-05-21 16:05:16
 * @LastEditTime: 2020-08-13 15:48:01
 * @LastEditors: huacong
-->
<template lang="pug">
  el-image(
    :src="src"
    style="cursor: pointer;"
    :style="{width: table ? '64px' : width, height: table ? '64px' : height, borderRadius: round ? '50%' : 0}"
    :fit="mode"
    :preview-src-list="preview && preUrl ? [preUrl] : null"
    :alt="alt"
    ref="img"
    )
</template>
<script>
export default {
  name: 'AImage',
  props: {
    defaultImage: {
      type: String,
      default: ''
    },
    url: {
      type: String,
      default: ''
    },
    // 是否接口获取
    reqFlag: {
      type: Boolean,
      default: false
    },
    alt: {
      type: String,
      default: '图片'
    },
    height: {
      type: [String, Number],
      default: '64'
    },
    width: {
      type: [String, Number],
      default: '100%'
    },
    mode: {
      type: String,
      default: 'fill'
    },
    preview: {
      type: Boolean,
      default: true
    },
    table: {
      type: Boolean,
      default: false
    },
    round: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      preUrl: '', // 大图预览
      src: ''
    }
  },
  watch: {
    url: {
      handler (val) {
        const { defaultImage } = this
        // console.log(val)
        if (val && (val.startsWith('http') || val.startsWith(this.BASE_URL) || val.startsWith('blob:'))) {
          this.src = val
        } else {
          this.src = val ? this.BASE_URL + val : require(`@/assets/${defaultImage}.png`)
        }
        this.preUrl = this.src
      },
      immediate: true
    }
  },
  methods: {
  }
}
</script>
